<template>
	<view class="returns-detail-viewport">
		<view class="banner-wrapper">
			<view class="place-holder-top">
			</view>
			<view class="place-holder-bottom"></view>
		</view>
		<view class="total-amount">
			<view class="price">
				{{total}}
			</view>
			<view class="title">
				<view class="title-flag"></view>
				<view class="title-txt">
					合计销售额(元)
				</view>
			</view>
		</view>
		<view class="placeholder"></view>
		<view class="record-container">
			<block v-if="listData.length">
				<tui-list-cell
					padding="0"
					:lineLeft="false"
					:arrow="false"
					v-for="item in listData" :key="item.id">
					<view class="tui-list-cell">
						<view class="avatar">
							<image class="avatar-img" :src="item.avatarUrl" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="user-name">
								<view>{{item.nickName || '未知用户'}}</view>
								<view class="amount-txt">
									预计收益: {{item.agentProfit || '0.00'}}
								</view>
							</view>
							<view class="phone-number">
								<view></view>
								<view class="amount-txt">
									销售额: {{item.totalSaleAmount || '0.00'}}
								</view>
							</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<block v-else>
				<view class="">
					<tui-no-data :fixed="false" imgUrl="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/img_noorder_3x.png">暂无明细记录～</tui-no-data>
				</view>
			</block>
			<cw-load-more :status="moreStatus" v-if="listData.length"></cw-load-more>
		</view>
		<uni-calendar
			ref="refCalendar"
			:range="true"
			:insert="false"
		/>
	</view>
</template>

<script>
	import { LoadMore } from '@/constants'
	import CwLoadMore from '@/components/common/cw-load-more/cw-load-more.vue'
	import dayjs from '@/utils/dayjs.js'
	export default {
		components: {
			CwLoadMore
		},
		data() {
			return {
				total: '0.00',
				listData: [],
				moreStatus: LoadMore.noop
			};
		},
		filters: {
			typeFilter (val) {
				return val === 5 ? '返现' : '分润'
			},
			dateFilter (val) {
				if (val.length !== 8) {
					return val
				} else {
					return `${val.substr(0, 4)}-${val.substr(4, 2)}-${val.substr(6, 2)}`
				}
			},
			timeFilter (val) {
				if (val.length !== 6) {
					return val
				} else {
					return `${val.substr(0, 2)}:${val.substr(2,2)}:${val.substr(4,2)}`
				}
			}
		},
		onLoad(opts) {
			this.total = opts.total
			this.datas = {
				pagination: {
					pageNum: 1,
					pageSize: 20
				}
			}
			uni.showLoading()
			this.getSaleAmountList()
		},
		methods: {
			async getSaleAmountList() {
				const { pagination: { pageNum, pageSize } } = this.datas
				const { success, data } = await this.$api.saleamountDetail(pageNum, pageSize)
				if (pageNum === 1) {
					this.listData = data || []
					this.moreStatus = data.length >= pageSize ? LoadMore.noop : LoadMore.nomore
				} else {
					if (data && data.length) {
						this.listData = this.listData.concat(data)
						this.moreStatus = data.length >= pageSize ? LoadMore.noop : LoadMore.nomore
					} else {
						this.moreStatus = LoadMore.nomore
					}
				}
				uni.hideLoading()
			}
		},
		onReachBottom() {
			if (![LoadMore.nomore, LoadMore.loading].includes(this.moreStatus)) {
				this.moreStatus = LoadMore.loading
				this.datas.pagination.pageNum++
				this.getSaleAmountList()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.returns-detail-viewport {
	.banner-wrapper {
		.place-holder-top {
			background-color: #e41f19;
			height: 40rpx;
			.filter-wrapper {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				justify-content: center;
				color: #FFF;
			}
		}
		.place-holder-bottom {
			position: relative;
			border-radius: 14rpx;
			background-color: #fff;
			margin-top: -30rpx;
			height: 40rpx;
		}
	}
	.total-amount {
		padding: 0 40rpx 40rpx;
		.price {
			font-size: 50rpx;
			font-weight: bold;
			color: #333;
		}
		.title {
			display: flex;
			.title-flag {
				width: 10rpx;
				border-top-right-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
				background-color: #ec3e30;
			}
			.title-txt {
				padding-left: 14rpx;
				color: #555;
				font-size: 28rpx;
			}
		}
	}
	.placeholder {
		width: 100%;
		height: 20rpx;
		background-color: #F7F7F7;
	}
	.record-container {
		padding: 0 0rpx;
		.tui-list-cell {
			display: flex;
			align-items: center;
			padding: 20rpx 60rpx 20rpx 20rpx;
			width: 100%;
			.avatar {
				border-radius: 14rpx;
				width: 80rpx;
				height: 80rpx;
				background: #eee;
				.avatar-img {
					width: 80rpx;
					height: 80rpx;
				}
			}
			.content {
				flex: 1;
				width: 0;
				overflow: hidden;
				padding: 0 0 0 20rpx;
				.amount-txt {
					font-size: 24rpx;
					color: #666;
				}
				.user-name {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					display: flex;
					justify-content: space-between;
					
				}
				.phone-number {
					font-size: 24rpx;
					color: #666;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
